<!--suppress ALL -->
<template>
  <ul class="content-list">
    <li v-for="item in records" :key="item.articleId">
      <router-link :to="'/detail/' + item.categoryId + '/' + item.articleId">
        <i></i><span :class="item.recommend === '推荐'? 'hot' : 'hot1'">{{item.title}}</span>
      </router-link>
    </li>
  </ul>
</template>

<script>
export default {
  name: 'ListItem',
  props: {
    records: {
      type: Array,
      require: true
    }
  },
  data () {
    return {
    }
  },
  methods: {
  }
}
</script>

<style scoped>
  .content-list{
    min-height: 30vh;
  }
  .content-list li{
    text-align: left;
    text-align: left;
    line-height: 30px;
    list-style: none;
    cursor: pointer;
  }
  .content-list a:hover{
    color: #409eff;
  }
  .content-list a{
    text-decoration:none;
    color:#333;
  }
  .content-list li i{
    float: left;
    content: "";
    background: #ccc;
    width: 4px;
    height: 4px;
    overflow: hidden;
    display: inline-block;
    margin: 13px 11px 0 0;
    border-radius: 2px;
  }
  .hot{
    position: relative;
  }
  .hot:after{
    content: "";
    position: absolute;
    width: 22px;
    height: 10px;
    right: -31px;
    top: 3px;
    background: url(../../../assets/hot.gif);
  }
</style>
